<!--  department 部门 - 属性面板 -->
<template>
  <div class="departmentAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="lab">提示文字：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.placeholder"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单列数</div>
          <div>
            <t-radio-group
              v-model="attributeset.data.defaultWidth"
              default-value="1"
              size="small"
              @change="widthChange"
            >
              <t-radio-button value="1">一列</t-radio-button>
              <t-radio-button value="2">两列</t-radio-button>
              <t-radio-button value="3">三列</t-radio-button>
              <t-radio-button value="4">四列</t-radio-button>
            </t-radio-group>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值</div>
          <div>
            <t-select-input
              v-if="attributeset.data.isSearch"
              :value="attributeset.data.defaultValueName"
              :popup-visible="popupVisible"
              :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
              placeholder="请选择"
              clearable
              allow-input
              size="small"
              @popup-visible-change="onPopupVisibleChange"
              @clear="onClear"
              @input-change="initOptions"
            >
              <template #panel>
                <ul
                  v-if="departmentOptions.length > 0"
                  class="tdesign-demo__select-input-ul-single"
                  style="height: 300px; overflow-y: scroll"
                >
                  <li
                    v-for="item in departmentOptions"
                    :key="item.id"
                    @click="() => onOptionClick(item)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
                <ul v-else>
                  <li class="t-select__empty">暂无数据</li>
                </ul>
              </template>
              <template #suffixIcon>
                <icon name="chevron-down" size="large" />
              </template>
            </t-select-input>
            <t-select
              v-else
              v-model="attributeset.data.formId"
              placeholder="请选择"
            >
              <t-option
                v-for="item in departmentOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click="valueChange(item)"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否只读</div>
          <div><t-switch v-model="attributeset.data.isDisable" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">开启搜索</div>
          <div><t-switch v-model="attributeset.data.isSearch" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch, getCurrentInstance } from 'vue'
import { Icon } from 'tdesign-icons-vue-next'
import { MessagePlugin } from 'tdesign-vue-next'
import { request } from '@/utils/fetch'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })
onMounted(() => {
  initOptions()
})
// 默认选项处理
const valueChange = (item) => {
  attributeset.data.defaultValue = item.id
  attributeset.data.defaultValueName = item.name
}
// 搜索下拉的开启和关闭操作
const popupVisible = ref(false)
const onPopupVisibleChange = (val) => {
  popupVisible.value = val
}
// 清除
const onClear = () => {
  attributeset.data.defaultValue = ''
  attributeset.data.defaultValueName = ''
}
// 点击下拉选项
const onOptionClick = (item) => {
  attributeset.data.defaultValue = item.id
  attributeset.data.defaultValueName = item.name

  initOptions(item.id)
  // 选中后立即关闭浮层
  popupVisible.value = false
}
// 获取APP根实例
const instance = getCurrentInstance()
const instances: any = instance.appContext.app

const departmentOptions = ref([])
const initOptions = (key?: string) => {
  const { departMentData, departMentQueryData } = instances.$initConfig
  if (departMentData) {
    departmentOptions.value = departMentData
  } else {
    const { url, method, params } = departMentQueryData
    request(url, method, { ...params, query: key })
      .then((res: any) => {
        departmentOptions.value = res
      })
      .catch((err) => {
        if (err.message && typeof err.message === 'string') {
          MessagePlugin.error(err.message)
        } else {
          MessagePlugin.error(err)
        }
      })
  }
}

// 处理列的调整宽度
const widthChange = (val) => {
  switch (val) {
    case '1':
      attributeset.data.width = 100
      break
    case '2':
      attributeset.data.width = 50
      break
    case '3':
      attributeset.data.width = 33.3
      break
    case '4':
      attributeset.data.width = 25
      break
  }
}
// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])

// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
